<template>
	<view class="content">
		<u-navbar title="搜索" :placeholder='true' height="88rpx" leftIconColor="#fff" titleStyle='color:#fff;font-size:32rpx'
			left-icon-size="32rpx" bg-color="#FF594D" @leftClick="leftClick" :autoBack="true">
		</u-navbar>

		<view class="search_content">
			<u-search placeholder="请输入上平名称或品牌" searchIconSize="34rpx" :inputStyle="style" v-model="keywords" height="68rpx"
				searchIconColor="#777777" placeholderColor="#777777" color="#777" bgColor="#ffffff" :showAction='false'
				@search="search"></u-search>
		</view>
		<view class="tabs">
			<view :class="['tabs_item',value==0?'current':'']" @click="changeTab(0)">
				<text>综合</text>
			</view>
			<view :class="['tabs_item arrow_content',value==1?'current':'']" @click="changeTab(1)">
				<text>价格</text>
				<view :class="['arrow',rotate?'rotate':'' ]">
					<image class="top_arrow" src="../../static/images/search/Vector@2x (1).png" mode=""></image>
					<image class="bottom_arrow" src="../../static/images/search/Vector@2x.png" mode=""></image>
				</view>
			</view>
			<view :class="['tabs_item',value==2?'current':'']" @click="changeTab(2)"> <text>分类</text>
			</view>
		</view>
		<view class="new_product">
			<view class="new_product_list">
				<template v-for="(item,index) in list1">
					<goods-cover :item="item" :key="index"></goods-cover>
				</template>
			</view>
		</view>
		<view class="not" v-show="!list1[0]">
			暂无数据
		</view>
	</view>
</template>

<script>
	import {
		getCommodity
	} from '../../api/index.js'
	export default {
		onLoad() {
			uni.onKeyboardHeightChange(res => {
				console.log(res);
			})
		},
		data() {
			return {
				titleStyle: {
					color: '#fff',
				},
				keywords: '',
				style: {
					'font-size': '24rpx'
				},
				value: 0,
				list1: [],
				list2: [],
				rotate: false,
				search_text: ' '
			}
		},
		methods: {
			leftClick() {
				console.log('rightClick');
			},
			search(e) {
				console.log(e);
				this.getCommodityData(e)
				this.search_text = e
			},
			changeTab(index) {
				this.value = index
				switch (index) {
					case 0:
						this.getCommodityData(this.search_text)
						break;
					case 1:
						this.rotate = this.rotate ? false : true;
						this.list1.sort((a, b) => {
							if (this.rotate) {
								return b.list[0].specificationPrice - a.list[0].specificationPrice
							} else {
								return a.list[0].specificationPrice - b.list[0].specificationPrice
							}
						});
						break
					case 2:
						this.getCommodityData(this.search_text)
						break
				}
			},
			async getCommodityData(commodityName) {
				const res = await getCommodity({
					commodityName,
					commodityType: 3
				})
				console.log(res);
				this.list1 = res.rows
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f3f3f3;
		height: 100vh;

		.not {
			text-align: center;
		}

		.search_content {
			padding: 20rpx;
		}

		.tabs {
			display: flex;
			height: 88rpx;
			background-color: #fff;
			padding: 0 36rpx;
			justify-content: space-between;
			align-items: center;
			color: #777777;
			font-size: 26rpx;
			margin-bottom: 20rpx;

			.rotate {
				transform: rotate(180deg);
				// margin-left: 20rpx;
				padding-left: 0;
				// padding-right: 20rpx;
			}

			.arrow_content {
				text {
					padding-right: 20rpx;
				}
			}

			.tabs_item {
				display: flex;
				width: 160rpx;
				justify-content: center;
				position: relative;

				&.current {
					color: #FF594D;

				}

				&.current::after {
					content: "";
					position: absolute;
					width: 52rpx;
					height: 4rpx;
					background-color: #FF594D;
					border-radius: 666rpx;
					bottom: -14rpx;
				}

				.arrow {
					display: flex;
					flex-direction: column;
					justify-content: center;
					// padding-left: 20rpx;

					image {
						width: 17rpx;
						height: 10rpx;

						&.top_arrow {
							margin-bottom: 5rpx;
						}

						&.bottom_arrow {
							margin-top: 5rpx;
						}
					}
				}
			}
		}
	}

	.new_product {
		padding: 0 25rpx 144rpx;
		display: flex;
		justify-content: space-between;

		.new_product_list {
			display: flex;
			width: 100%;
			justify-content: space-between;
		}
	}
</style>